<template>
  <main>
    <h1>社区管理系统居民端</h1>
    <p>
      您好，<span>{{ useUserStore().userInfo.username }}</span
      ><br />
      欢迎来到社区居民服务平台 这里是您的专属社区空间。<br />
      在这里，您可以轻松享受一站式社区服务体验。<br />
      我们致力于打造安全、便捷、温暖的社区环境，<br />
      让每一位居民感受家的温度与关怀。 开启您的智慧社区生活，从这里开始！
    </p>
    <div class="menu">
      <div
        v-for="item in menu"
        class="menu-item"
        :key="item.name"
        @click="item.click"
      >
        <img :src="item.icon" alt="" srcset="" />
        {{ item.name }}
      </div>
    </div>
  </main>
  <el-dialog :title="title" v-model="dialogVisible" width="70%">
    <div style="max-height: 60vh; overflow-y: auto">
      <router-view></router-view>
    </div>
    <!-- <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleLogout">确认</el-button>
    </template> -->
  </el-dialog>
  <!-- 修改密码对话框 -->
  <el-dialog v-model="passwordDialog" title="修改密码" width="400px">
    <el-form
      ref="passwordFormRef"
      :model="passwordForm"
      :rules="passwordRules"
      label-width="100px"
    >
      <el-form-item label="原密码" prop="oldPassword">
        <el-input
          v-model="passwordForm.oldPassword"
          type="password"
          show-password
          placeholder="请输入原密码"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          v-model="passwordForm.newPassword"
          type="password"
          show-password
          placeholder="请输入新密码"
        />
      </el-form-item>
      <el-form-item label="确认新密码" prop="confirmPassword">
        <el-input
          v-model="passwordForm.confirmPassword"
          type="password"
          show-password
          placeholder="请确认新密码"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="passwordDialog = false">取消</el-button>
        <el-button type="primary" @click="handleChangePassword">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import png1 from "@/assets/1.png";
import png2 from "@/assets/2.png";
import png3 from "@/assets/3.png";
import png4 from "@/assets/4.png";
import png5 from "@/assets/5.png";
import { useUserStore } from "@/stores/user";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { changePassword } from "@/api/auth";
import { ElMessageBox } from "element-plus";
const router = useRouter();
const dialogVisible = ref(false);
const title = ref("提示");
const menu = [
  {
    name: "投诉建议",
    icon: png3,
    click: () => {
      dialogVisible.value = true;
      title.value = "投诉建议";
      router.push("/user/complaint/list");
    },
  },
  {
    name: "物业缴费",
    icon: png2,
    click: () => {
      dialogVisible.value = true;
      title.value = "物业缴费";
      router.push("/user/property-fee/list");
    },
  },
  {
    name: "社区活动",
    icon: png1,
    click: () => {
      dialogVisible.value = true;
      title.value = "社区活动";
      router.push("/user/event/list");
    },
  },
  {
    path: "/community",
    name: "修改密码",
    icon: png4,
    click: () => {
      passwordDialog.value = true;
    },
  },
  {
    path: "/community",
    name: "退出登录",
    icon: png5,
    click: () => {
      ElMessageBox.confirm("确定要退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        localStorage.removeItem("token");
        router.push("/login");
      });
    },
  },
];

// 密码修改相关
const passwordDialog = ref(false);
const passwordFormRef = ref(null);
const passwordForm = ref({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});
const passwordRules = {
  oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, message: "密码长度不能小于6位", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "请确认新密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.value.newPassword) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};
// 修改密码
const handleChangePassword = () => {
  passwordFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await changePassword({
          oldPassword: passwordForm.value.oldPassword,
          newPassword: passwordForm.value.newPassword,
        });
        ElMessage.success("密码修改成功");
        passwordDialog.value = false;
        passwordForm.value = {
          oldPassword: "",
          newPassword: "",
          confirmPassword: "",
        };
      } catch (error) {
        // if (error.response?.data) {
        //   ElMessage.error(error.response.data);
        // } else {
        //   ElMessage.error("修改密码失败，请重试");
        // }
      }
    }
  });
};
</script>
<style scoped>
main {
  height: 100vh;
  width: 100vw;
  background: url("../../assets/image.png") no-repeat center center fixed;
  background-size: cover;
  position: relative;
  padding: 60px;
  overflow-y: auto;
}
h1 {
  /* text-align: center; */
  margin: 20px 0;
  font-size: 48px;
  /* font-weight: 700; */
  padding: 0 60px;
  color: #000;
  letter-spacing: 10px;
  margin-bottom: 50px;
}
p {
  margin: 20px 0;
  font-size: 24px;
  padding: 0 60px;
  color: #363636;
  line-height: 60px;
}
.menu {
  display: flex;
  margin-top: 50px;
  margin-left: 60px;
}
.menu-item {
  margin-right: 20px;
  background-color: #fff;
  /* padding: 20px; */
  border-radius: 10px;
  color: #000;
  display: flex;
  font-size: 24px;
  flex-direction: column;
  align-items: center;
  width: 180px;
  height: 180px;
  justify-content: center;
}
.menu-item:hover {
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}
.menu-item img {
  margin-bottom: 10px;
  width: 80px;
}
</style>
